<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1,user-scalable=no">
    <title>显示网络场景</title>
    <style>
        html,body,#viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/css/main.css">
    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
        require([
            'esri/Map',
            'esri/views/MapView',
            'esri/layers/FeatureLayer',
            'esri/Graphic',
            'esri/geometry/geometryEngine'
        ],function(
            Map,
            MapView,
            FeatureLayer,
            Graphic,
            geometryEngine
        ) {
            var  map = new Map({
                basemap:"topo-vector"
            });

            var view = new MapView({
                container:"viewDiv",
                map:map,
                center: [-118.80543,34.02700],
                zoom:13
            });

            // Trails(lines)小径
            // 引用Trails图层，并添加到地图中
            var featureLayer = new FeatureLayer({
                url:"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0"
            });
            map.add(featureLayer);

            // 创建缓冲区
            var activeGraphic;
            var bufferGraphic;
            var textGraphic;
            var lineGraphic;
            
            // 使用视图hitTest功能查找最接近屏幕点的图形,并仅返回找到的新路径
            // 使用OBJECTID图形的属性来标识何时找到新图形
            function findNearestGraphic(event) {
                return view.hitTest(event).then(function (response) {
                    var graphic;
                    // 只获取轨迹图
                    if(response.results.length) {
                        graphic = response.results.filter(function (results) {
                            return results/graphic.layer === featureLayer;
                        })[0].graphic;
                    }
                     // Only return new graphics are found
                    if (graphic) {
                        if (!activeGraphic || activeGraphic.attributes.OBJECTID !== graphic.attributes.OBJECTID) {
                            return graphic;
                        } else {
                            return null;
                        }
                    } else {
                        return null;
                    }
                })
            }

            // 创建缓冲区图形后，定义一个bufferGraphic变量和一个称为drawBuffer显示缓冲区图形的函数
            // 
            // var bufferGraphic;

            function drawBuffer(bufferGeometry) {
                view.graphics.remove(bufferGraphic);
                bufferGraphic = new Graphic({
                    geometry: bufferGeometry,
                    symbol: {
                        type: "simple-fill",
                        color: "rgba(0,0,0,0)",
                        outline: {
                            color: "rgba(0,0,0,.5)",
                            width: 1
                        }
                    }
                });
                view.graphics.add(bufferGraphic);
            }

            // 使用view pointer-move事件侦听光标何时移动并调用findNearestGraphic
            // 传入event（屏幕坐标）以找到最接近的图形
            // 到图形后，设置activeGraphic变量，然后使用函数缓冲轨迹
            // 将距离设置为0.25，单位为miles
            // 将缓冲区添加到视图
            view.on("pointer-move",function(event) {
                findNearestGraphic(event).then(function(graphic) {
                    if(graphic) {
                        activeGraphic = graphic;
                        var buffer = geometryEngine.geodesicBuffer(activeGraphic.geometry, 0.25, "miles");
                        drawBuffer(buffer);
                    }
                })
            });


// 参考  https://developers.arcgis.com/javascript/latest/guide/buffer-and-intersect-geometry/
        })
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>